<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
<div id="ad"></div>
<script type="text/javascript">
    //需求-1  点击 div 2s 后颜色变成『粉色』

    // 1. 获取当前div
    const div = document.getElementById("ad");
    // 2. 绑定点击事件
    /*div.onclick = (event) => {
        debugger
        // 3. 设置定时器（一次性）
        setTimeout(() => {
            div.style.background = "pink";
        }, 2000)
    };
    */
    div.onclick = function () {
        setTimeout(() => {
            this.style.background = "pink";
        }, 2000)
    };

    //需求-2  从数组中返回偶数的元素
    const arr = [1, 6, 9, 10, 100, 25];
    let numbers = arr.filter((value) => value % 2 === 0);
    console.log(numbers)

</script>
<!--<script>
    //需求-1  点击 div 2s 后颜色变成『粉色』
    //获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    ad.addEventListener("click", function(){
        //保存 this 的值
        // let _this = this;
        //定时器
        setTimeout(() => {
            //修改背景颜色 this
            // console.log(this);
            // _this.style.background = 'pink';
            this.style.background = 'pink';
        }, 2000);
    });

    //需求-2  从数组中返回偶数的元素
    const arr = [1,6,9,10,100,25];
    // const result = arr.filter(function(item){
    //     if(item % 2 === 0){
    //         return true;
    //     }else{
    //         return false;
    //     }
    // });

    const result = arr.filter(item => item % 2 === 0);

    console.log(result);

    // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
    // 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法

</script>-->
</body>

</html>